<template>
  <div class="article-item-container">
    <div class="thumb">
      <div @click="() => handleDes(data)">
        <ImageLoader :src="data?.thumb" :placeholder="LoadingSrc" :isListImage="true" />
      </div>
    </div>
    <div class="content">
      <a @click.prevent="() => handleDes(data)" class="title">{{ data?.title }}</a>
      <div class="aside">
        <span>日期：{{ formDate(data?.createDate) }}</span>
        <span>浏览：{{ data?.scanNumber }}</span>
        <span>评论：{{ data?.commentNumber }}</span>
        <div @click="() => handleSelect(data.categoryId)">{{ data?.category?.name }}</div>
      </div>
      <div class="desc">
        {{ data?.description }}
      </div>
    </div>
  </div>
</template>

<script setup>
import LoadingSrc from "@/assets/loading.gif";
import ImageLoader from "@/components/ImageLoader/index.vue";
import { formDate } from "@/utils/tools.js";
const { data, handleSelect } = defineProps({
  data: {
    type: Object,
    default: {},
  },
  handleSelect: {
    type: Function,
  },
  handleDes: {
    type: Function,
  },
});
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.article-item-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;

  .thumb {
    width: 200px;
    height: 200px;
    margin-right: 20px;

    div {
      display: inline-block;
      width: 100%;
      height: 100%;
      transition: 0.5s;

      &:hover {
        transform: scale(1.15);
        box-shadow: -3px 3px 6px #000;
      }
    }
  }

  .content {
    flex: 1;

    .title {
      font-size: 33px;
      color: @words;
      font-weight: bold;
      cursor: pointer;

      &:hover {
        color: @primary;
      }
    }

    .aside {
      color: @gray;
      font-size: 14px;
      letter-spacing: 3px;

      span {
        margin-right: 7px;
      }

      div {
        cursor: pointer;

        &:hover {
          color: @primary;
        }
      }
    }

    .desc {
      margin: 15px 0;
      font-size: 15px;
    }
  }
}
</style>
